<!-- 结案阶段 -->
<template>
  <div>
    <tablePage ref="tablePage" canFold :defaultIsFold="true" :searchForm.sync="searchForm" :searchFormRules="searchFormRules" :requestFunc="requestFunc" :beforePlayLoad="beforePlayLoad">
      <template slot="search-form">
        <el-form-item label="案件类型" prop="itemDetailId">
          <el-select v-model="searchForm.itemDetailId" placeholder="请选择">
            <el-option-group v-for="group in itemdetailTree" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>

        <el-form-item label="案件来源" prop="itemSource">
          <el-select v-model="searchForm.itemSource" placeholder="请选择">
            <el-option v-for="item in eventSourceArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择">
            <el-option v-for="item in statusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="提交时间" prop="dateRange">
          <el-date-picker type="daterange" v-model="searchForm.dateRange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="案件名称" prop="title">
          <el-input v-model="searchForm.title" placeholder="请输入案件名称关键字"></el-input>
        </el-form-item>

        <el-form-item label="是否公开" prop="publicStatus">
          <el-select v-model="searchForm.publicStatus" placeholder="请选择">
            <el-option v-for="item in publicStatusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否过期" prop="expireFlag">
          <el-select v-model="searchForm.expireFlag" placeholder="请选择">
            <el-option v-for="item in expireFlagArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="评价状态" prop="appraiseStatus">
          <el-select v-model="searchForm.appraiseStatus" placeholder="请选择">
            <el-option v-for="item in appraiseStatusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template slot="left">
        <!-- <el-button v-if="isLeaderDepartment" @click="handleShowAddWorkOrderDialog" type="primary">创建案件</el-button> -->
        <!-- <el-button @click="handleImportDialog" v-if="isAdmin" type="primary" icon="img icon-add">批量导入投诉举报历史案件</el-button> -->
      </template>
      <template slot="rows">
        <tableColumnsCommon type="finish" fixed="right" @showDetailsDialog="handleShowDialog('detailsDialog', $event)" @showLeaveMessageDialog="handleShowDialog('leaveMessageDialog', $event)"></tableColumnsCommon>
      </template>
    </tablePage>

    <detailsDialog type="finish" :visible.sync="detailsDialog.visible" :id="currentRow.id" @read="handleReadComment" ref="detailsDialog">
      <template v-slot:footer-btn="{ details }">
        <!-- TODO  -->
        <finish-button :details="details" :rePlayLoadData="rePlayLoadData"></finish-button>
      </template>
    </detailsDialog>
  </div>
</template>

<script>
import tablePage from "@/components/tablePage/index.vue";
import searchFormItemsCommon from "@/views/workOrder/components/searchFormItemsCommon/searchFormItemsCommon";
import tableColumnsCommon from "@/views/workOrder/components/tableColumnsCommon";
import detailsDialog from "./components/detailsDialog.vue";
import leaveMessageDialog from "./components/leaveMessageDialog.vue";
import * as workOrderApi from "@/api/workOrder/index";
import { timeRemaining, workOrderPublicStatus, workOrderStatus } from "@/utils/filters";
import { defaultSearchFromForURLQueryMixin, initSearchForm, initSearchFormRules } from "./components/searchFormItemsCommon/mixin";
import importDialog from "./components/importDialog";
import { dict2Array, itemdetail2GroupOptions } from "@/utils/common";
import { workOrderAppraiseStatusDict, workOrderEventSourceDict, workOrderExpireFlagDict, workOrderPublicStatusDict } from "@/utils/dict";
import * as mattersApi from "@/api/matters";
import copyToDialog from "@/views/workOrder/components/copyToDialog.vue";
import createWorkOrderDialog from "@/views/workOrder/components/createWorkOrderDialog.vue";
import { rolePermissionsMixin } from "@/views/workOrder/mixin";
import FinishButton from "./detailsComponents/FinishButton.vue";
import { generateWorkOrderStatusArr } from "@/utils/common";
export default {
  name: "finish",
  mixins: [defaultSearchFromForURLQueryMixin, rolePermissionsMixin],
  components: {
    tablePage,
    searchFormItemsCommon,
    detailsDialog,
    leaveMessageDialog,
    tableColumnsCommon,
    importDialog,
    copyToDialog,
    createWorkOrderDialog,
    FinishButton,
  },
  filters: { workOrderStatus, timeRemaining, workOrderPublicStatus },
  data() {
    const statusArr = generateWorkOrderStatusArr(
      [
        { id: "4", name: "待办结" },
        { id: "5", name: "已办结" },
        { id: "15", name: "待终止" },
        { id: "8", name: "已终止" },
      ],
      [
        // [checkPermission(["允许取消回退"]), { id: "1", name: "回退中" }],
        // [checkPermission(['允许取消确认']), { id: '3', name: '调查中' }],
        // [checkPermission(["允许取消提交办结"]), { id: "4", name: "待办结" }],
      ]
    );
    return {
      createWorkOrderDialog: {
        details: {},
        isEdit: false,
        visible: false,
      },
      searchForm: initSearchForm({
        industrySectorName: "",
        // isFocusOnDepartment: 0,
        exceptionTag: 0,
        supervisionTag: 0,
        historyTrack: 0,
        historyException: 0,
        untoHandle: 0,
        expireFlag: "",
        addressCode: "",
        workOrderNumber: "",
        administrationCode: "",
        satisfactionLevel: "",
        addressId: "",
        finishTime: [],
        filingTime: [],
        createUsername: "",
        mobile: "",
        status: statusArr[0].id,
      }),
      searchFormRules: initSearchFormRules(),
      currentRow: {},
      detailsDialog: {
        editDetails: {},
        visible: false,
      },
      leaveMessageDialog: {
        visible: false,
      },
      importDialog: {
        visible: false,
      },
      copyToDialog: {
        visible: false,
      },
      processDepartmentTree: [],
      itemdetailTree: [],
      appraiseStatusArr: dict2Array(workOrderAppraiseStatusDict, 1),
      publicStatusArr: dict2Array(workOrderPublicStatusDict, 1),
      statusArr: statusArr,
      expireFlagArr: dict2Array(workOrderExpireFlagDict, 1),
      eventSourceArr: dict2Array(workOrderEventSourceDict, 1),
    };
  },
  watch: {
    "searchForm.administrationCode"(val) {
      this.processDepartmentTree = [];
      this.searchForm.processDepartmentCode = "";
      if (val) {
        this.getDepartmentTree();
      }
    },
  },
  created() {
    // this.getDepartmentTree();
    this.getItemdetailTree();
  },
  methods: {
    requestFunc: workOrderApi.finish.list,
    replenishSuccess() {
      this.rePlayLoadData();
      // this.$emit("replenishSuccess");
    },
    confirmSuccess() {
      this.rePlayLoadData();
    },
    clearFileInput() {
      document.getElementById("fileInput").value = "";
    },
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },

    handlePreview(row) {
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },

    handleShowAddWorkOrderDialog() {
      const dialog = "createWorkOrderDialog";
      this[dialog].details = {};
      this[dialog].isEdit = false;
      this.handleShowDialog(dialog, {});
    },
    beforePlayLoad(searchForm) {
      if (searchForm.finishTime && searchForm.finishTime.length) {
        searchForm.finishTimeEnd = searchForm.finishTime[1];
        searchForm.finishTime = searchForm.finishTime[0];
      }
      if (searchForm.filingTime && searchForm.filingTime.length) {
        searchForm.filingTimeEnd = searchForm.filingTime[1];
        searchForm.filingTime = searchForm.filingTime[0];
      }
      return searchForm;
    },
    rePlayLoadData() {
      this.$refs.tablePage.playLoadData();
      if (this.detailsDialog.visible) {
        this.$refs.detailsDialog.playLoadData();
      }
    },

    getItemdetailTree() {
      mattersApi.itemdetailTree().then((res) => {
        this.itemdetailTree = itemdetail2GroupOptions(res.result);
      });
    },
    getDepartmentTree() {
      workOrderApi.all.getProcessCodeList({ administrativeCode: this.searchForm.administrationCode }).then((res) => {
        this.processDepartmentTree = res.result;
      });
    },
    handleReadComment() {
      // this.currentRow.appraiseFlag = "N";
    },
    handleReadLeaveMessage() {
      this.currentRow.wordsFlag = "N";
    },
    handleShowDialog(type, row) {
      this[type].visible = true;
      this.currentRow = row;
    },
    handleCascaderChange() {
      this.$refs.processDepartmentCascader.toggleDropDownVisible(false);
    },
    handleImportDialog() {
      this.importDialog.visible = true;
    },
    handleimportSuccess() {
      this.importDialog.visible = false;
    },
  },
};
</script>

<style scoped></style>
